<template>
  <q-menu ref="cascadeMenu"
    :anchor="level===1?'bottom left':'top end'"
    :self="level===1?'top left':'top start'"
  >
    <q-list>
      <div v-for="cascade in cascadeList" :key="cascade.id" style="min-width:200px;" >
        <q-item dense clickable v-if="cascade.children.length>0">
          <q-item-section>{{cascade.name}}</q-item-section>
          <q-item-section side>
            <q-icon name="keyboard_arrow_right" />
          </q-item-section>
          <cascade :form="form" :cascadeList="cascade.children" @selCascade="selCascade" />
        </q-item>
        <q-item dense clickable v-else>
          <q-item-section @click="selCascade(cascade)">{{cascade.name}}</q-item-section>
        </q-item>
      </div>
    </q-list>
  </q-menu>
</template>

<script>
export default {
  name: 'Cascade',
  props: {
    cascadeList: Array,
    level: Number,
    form: {
      type: Object,
      required: false,
    },
    dataList: {
      type: Array,
    }
  },
  data() {
    return {
    };
  },
  created() {

  },
  mounted() {

  },
  methods: {
    selCascade(cascade) {
      // this.form.ceshi = `${this.form.ceshi}/${cascade.name}`;
      this.$refs.cascadeMenu.hide();
      this.$emit('selCascade', cascade);
    },
  },
};
</script>

<style scoped lang="stylus"></style>
